<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--基本使用-->
    <h1>{{message}}</h1>

    <!--表达式-->
    <h1>计数双倍:{{count * 2}}</h1>

    <!--三元表达式-->
    <h1>{{flag ? 'true' : 'false'}}</h1>

    <!--调用用内置方法-->
    <h1>{{info.split(" ").reverse().join(" ")}}</h1>

    <!--调用methods中的方法-->
    <h1>{{getSum(10,20)}}</h1>
</div>
<script src="../../JavaScript/vue.js"></script>
<script>
    /*
    如果我们希望把data中的数据显示到template中,使用最多的语法是mustache语法的文本插值
    data返回的对象是有添加到Vue的响应式系统中的,当data中的数据发生改变的时候对应的内容也会更新,mustache语法不仅仅是data中的属性,也可以是一个JavaScript的表达式
    * */
    const app = Vue.createApp({
        data() {
            return {
                message: "helloVue",
                count: 0,
                flag: true,
                info: "my name is taopinqi"
            }
        },
        methods:{
            getSum(num1,num2){
                return num1+num2
            }
        }
    })
    app.mount("#app")
</script>
</body>
</html>